
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>背景切换</title>
    <script src="public.js"></script>
    <style type="text/css">
        body{
            background: #fff;
        }
        .Ct{
            width:1000px;
            margin:0 auto;
        }
        .ywPart1{
            width: 310px;
            margin: 0 auto;
            padding: 20px 10px 20px 30px;
        }

        .hex {
            float: left;
            margin-left: 2px;
            margin-bottom: -18px;
            cursor: pointer;
        }
        .hex .hex_top {
            width: 0;
            border-bottom: 20px solid #f0ce8b;
            border-left: 35px solid transparent;
            border-right: 35px solid transparent;
            margin-top: -1px\9\0;
            margin-top: 0px\0;
        }
        .hex .hex_middle {
            width: 70px;
            height: 30px;
            line-height: 30px;
            background: #f0ce8b;
            text-align: center;
            font-family: "宋体";
            color: #333333;
        }
        .hex .hex_bottom {
            width: 0;
            border-top: 20px solid #f0ce8b;
            border-left: 35px solid transparent;
            border-right: 35px solid transparent;
            margin-top: -1px\9\0;
            margin-top: 0px\0;
        }
        .hex-row {
            clear: left;
        }
        .hex-row.even {
            margin-left: 38px;
        }
        .hex-row.odd {
            margin-right: 38px;
        }

        .hex.hexActive .hex_top {
            width: 0;
            border-bottom: 20px solid #86ccac;
            border-left: 35px solid transparent;
            border-right: 35px solid transparent;
            margin-top: -1px\9\0;
            margin-top: 0px\0;
        }
        .hex.hexActive .hex_middle {
            width: 70px;
            height: 30px;
            line-height: 30px;
            background: #86ccac;
            text-align: center;
            font-family: "宋体";
            color: #FFFFFF;
        }
        .hex.hexActive .hex_bottom {
            width: 0;
            border-top: 20px solid #86ccac;
            border-left: 35px solid transparent;
            border-right: 35px solid transparent;
            margin-top: -1px\9\0;
            margin-top: 0px\0;
        }
    </style>
</head>
<body>
<div class="Ct">
    <div class="ywPart1" id="hexDiv">
        <div class="hex hexActive" name="hexBlcok">
            <div class="hex_top"></div>
            <div class="hex_middle">红色</div>
            <div class="hex_bottom"></div>
        </div>
        <div class="hex" name="hexBlcok">
            <div class="hex_top"></div>
            <div class="hex_middle">橙色</div>
            <div class="hex_bottom"></div>
        </div>
        <div class="hex" name="hexBlcok">
            <div class="hex_top"></div>
            <div class="hex_middle">黄色</div>
            <div class="hex_bottom"></div>
        </div>
        <div class="hex" name="hexBlcok">
            <div class="hex_top"></div>
            <div class="hex_middle">绿色</div>
            <div class="hex_bottom"></div>
        </div>
        <div class="hex hex-row even" name="hexBlcok">
            <div class="hex_top"></div>
            <div class="hex_middle">青色</div>
            <div class="hex_bottom"></div>
        </div>
        <div class="hex" name="hexBlcok">
            <div class="hex_top"></div>
            <div class="hex_middle">蓝色</div>
            <div class="hex_bottom"></div>
        </div>
        <div class="hex" name="hexBlcok">
            <div class="hex_top"></div>
            <div class="hex_middle">紫色</div>
            <div class="hex_bottom"></div>
        </div>
        <div class="hex hex-row" name="hexBlcok">
            <div class="hex_top"></div>
            <div class="hex_middle">黑色</div>
            <div class="hex_bottom"></div>
        </div>
        <div class="hex" name="hexBlcok">
            <div class="hex_top"></div>
            <div class="hex_middle">白色</div>
            <div class="hex_bottom"></div>
        </div>
        <div class="hex" name="hexBlcok">
            <div class="hex_top"></div>
            <div class="hex_middle">灰色</div>
            <div class="hex_bottom"></div>
        </div>
        <div class="hex" name="hexBlcok">
            <div class="hex_top"></div>
            <div class="hex_middle">随机</div>
            <div class="hex_bottom"></div>
        </div>
        <div class="ClearFloat"></div>
    </div>
</div>
<script type="text/javascript">
	window.onload=function(){
		var aDiv=document.getElementsByClassName('hex')
		aDiv[0].onclick=function(){
			document.body.style.background='red'
		}
		aDiv[1].onclick=function(){
			document.body.style.background='orange'
		}
		aDiv[2].onclick=function(){
			document.body.style.background='yellow'
		}
		aDiv[3].onclick=function(){
			document.body.style.background='green'
		}
		aDiv[4].onclick=function(){
			document.body.style.background='red'
		}
		aDiv[5].onclick=function(){
			document.body.style.background='blue'
		}
		aDiv[6].onclick=function(){
			document.body.style.background='#f0f'
		}
		aDiv[7].onclick=function(){
			document.body.style.background='#000'
		}
		aDiv[8].onclick=function(){
			document.body.style.background='#fff'
		}
		aDiv[9].onclick=function(){
			document.body.style.background='#ccc'
		}
		aDiv[10].onclick=function(){
			document.body.style.background='rgb('+getrandom(0,255)+','+getrandom(0,255)+','+getrandom(0,255)+')'
		}
		
		
		
		
		
	}
	
	
	
	
	</script
	
	
	
	
	
	
	
</script>
</body>
</html>
